import React, { useState } from 'react';
import { View, Text, Modal, TouchableOpacity, StyleSheet } from 'react-native';
import { Picker } from '@react-native-picker/picker';

const SinglePickerModal = ({ isOne,title, onChange, visible, onConfirm, onCancel, options, value }) => {


    return (
        <Modal
            transparent={true}
            visible={visible}
            animationType="slide"
            onRequestClose={onCancel}
        >
            <View style={styles.modalContainer}>
                <View style={styles.pickerContainer}>
                    <View style={styles.buttonContainer}>
                        <TouchableOpacity onPress={onCancel}>
                            <Text style={styles.cancelButton}>取消</Text>
                        </TouchableOpacity>
                        <View>
                            <Text>{ title }</Text>
                        </View>
                        <TouchableOpacity
                            onPress={() => onConfirm(value)}
                        >
                            <Text style={styles.confirmButton}>确定</Text>
                        </TouchableOpacity>
                    </View>

                    {/* 单列选择器 */}
                    <Picker
                        selectedValue={value}
                        onValueChange={(itemValue) => {
                            const index = options.findIndex((item: any) => item.value == itemValue);
                            console.log('itemValue', index);
                            onChange(itemValue, index)
                        }}
                        style={styles.pickerColumn}
                        itemStyle={styles.pickerItem}
                        style={{ height: 200, width: '100%' }}
                    >
                        {
                            isOne && (
                                <Picker.Item label="请选择一个选项" value="" />
                            )
                        }
                        {
                            options.map((item) => (
                                <Picker.Item key={item.value} label={item.label} value={item.value} />
                            ))
                        }
                    </Picker>
                </View>
            </View>
        </Modal>
    );
};

export default SinglePickerModal;

const styles = StyleSheet.create({
    modalContainer: {
        flex: 1,
        justifyContent: 'flex-end',
        backgroundColor: 'rgba(0,0,0,0.5)',
    },
    pickerContainer: {
        backgroundColor: '#fff',
        borderTopLeftRadius: 10,
        borderTopRightRadius: 10,
        paddingHorizontal: 20,
        paddingTop: 12,
    },
    buttonContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        padding: 10,
    },
    cancelButton: {
        color: '#333',
        fontSize: 14,
    },
    confirmButton: {
        color: '#EC6138',
        fontSize: 14,
    },
    pickerColumn: {
        flex: 1,
        height: 200,
        width: "100%",
    },
    pickerItem: {
        fontSize: 18,
        height: 200,
        backgroundColor: "rgba(0,0,0,0)"
    },
});
